<!-- 余额 -->
<template>
  <div class="rem_box_container">
    <Tabbar></Tabbar>
    <div class="rem_box_wrapper">
      <div class="rem_box_hezi_container">
        <div class="rem_top_container">
          <div class="rem_top_wrapper">
            <div>我的余额</div>
            <div class="rem_top_s">0 学习币</div>
          </div>
        </div>
        <!-- 中间选择的 -->
        <div class="rem_bottom_container">
          <div class="rem_bottom_wrapper">
            <div
              class="bottom_list_hezi_container"
              v-for="(item, index) in list"
              :key="index"
              @click="onChange(index)"
              :class="{ active: index === tabCut }"
            >
              <div class="bottom_list_hezi_wrapper">
                <div>{{ item.priceName }}</div>
                <div class="bottom_list_font">{{ item.price }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 充值说明 -->
        <div class="rech_container">
          <div class="rech_wrapper">
            <h6>充值说明</h6>
            <div>
              1.学习币是网校中专有的一种虚拟货币，大家可以用学习币购买
            </div>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="bottom_container">
        <div class="bottom_box_container" ref="onPay" @click="recharge">
          立即充值
        </div>
      </div>
      <div>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
          <h6>支付方式</h6>
          <div>
            <p>支付宝</p>
            <p>微信</p>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar";
export default {
  components: { Tabbar },
  data() {
    return {
      list: [
        {
          priceName: "30000.00学习币",
          price: "$ 30000.00",
        },
        {
          priceName: "20000.00学习币",
          price: "$ 20000.00",
        },
        {
          priceName: "10000.00学习币",
          price: "$ 10000.00",
        },
        {
          priceName: "8000.00学习币",
          price: "$ 8000.00",
        },
        {
          priceName: "5000.00学习币",
          price: "$ 5000.00",
        },
        {
          priceName: "3000.00学习币",
          price: "$ 3000.00",
        },
        {
          priceName: "0.01学习币",
          price: "$ 0.01",
        },
        {
          priceName: "100.00学习币",
          price: "$ 100.00",
        },
      ],
      tabCut: "",
      show: false,
    };
  },
  methods: {
    onChange(index) {
      console.log(index);
      this.tabCut = index;
      let payColor = (this.$refs.onPay.style.background = "orange");
      return payColor;
    },
    recharge() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="scss" scoped>
.rem_box_container {
  width: 100vw;
  height: 100vh;
  // background-color: rgb(218, 58, 58);

  position: relative;
}
.rem_box_wrapper {
  padding-top: 6.9vh;
  width: 100%;
  height: 90%;
  // background-color: rgb(218, 58, 58);
  .rem_box_hezi_container {
    width: 100%;
    height: 170%;
    background-color: bisque;
  }
}
.rem_top_container {
  width: 100%;
  height: 8%;
  background-color: #fff;
  .rem_top_wrapper {
    width: 60%;
    height: 100%;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // background-color: antiquewhite;
    div {
      width: 25%;
    }
    .rem_top_s {
      color: orange;
    }
  }
}

.rem_bottom_container {
  width: 100%;
  height: 75%;
  background-color: rgb(238, 238, 238);
  .rem_bottom_wrapper {
    width: 100%;
    height: 100%;
    padding-top: 2px;
    .active {
      width: 90%;
      height: 10%;
      background-color: rgb(76, 245, 245) !important;
      border-radius: 20px;
      margin: 15px 20px;
      border: 1px solid orange;
    }
    .bottom_list_hezi_container {
      width: 90%;
      height: 10%;
      background-color: #fff;
      border-radius: 20px;
      margin: 15px 20px;
      .bottom_list_hezi_wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 14px;
        .bottom_list_font {
          color: orange;
        }
      }
    }
  }
}
.bottom_container {
  width: 100%;
  height: 10vh;
  background-color: rgb(204, 204, 204);
  position: fixed;
  bottom: 0px;
  left: 0px;
  .bottom_box_container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
}
.rech_container {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  .rech_wrapper {
    width: 90%;
    height: 100%;
    div {
      font-size: 15px;
      margin-top: 10px;
    }
  }
}
</style>
